<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>multi(多屏)</title>
  <script src="./ezuikit.js"></script>
  <style>
    .multi-container {
      display: flex;
    }
    .main-container {
      width: 600px;
      height: 606px;
      background-color: #000;
    }

    #main {
      width: 600px;
      height: 606px;
    }

    .right-container {
      display: flex;
      flex-direction: column;
    }
    .right-container > div {
      background-color: #000;
      border: 1px solid transparent;
      position: relative;
    }

    .sub-container img{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      font-size: 0;
      outline: none;
    }

    #right1, #right2, #right3 {
      width: 300px;
      height: 200px;
    }

    .selected {
      border-color: red!important;
    }
  </style>
</head>
<body>
  <div class="multi-container">
    <div class="main-container">
      <div id="main"></div>
    </div>
    <div class="right-container">
      <div class="sub-container selected">
        <div id="right1"></div>
      </div>
      <div class="sub-container">
        <div id="right2"></div>
      </div>
      <div class="sub-container">
        <div id="right3"></div>
      </div>
    </div>
  </div>
  <script>
    (function () { 
      // 一个主屏（选中的展示其中），三个副屏， 副屏点击切换展示在主屏中， 选中的副屏展示切换前的截图当作封面

      let players = []
      let mainPlayer = null
      let cover = document.createElement('img')
      let arr = [
        {
          url: "ezopen://open.ys7.com/BC7799090/1.hd.live",
          id: "right1",
          accessToken: "at.ao9rmhn824rnxeao5ck7fm4e1j2x7zey-4g4qudp8vd-1vumcfo-t28imym6"
        },
        {
          url: "ezopen://open.ys7.com/BF6985118/1.hd.live",
          id: "right2",
          accessToken: "at.ao9rmhn824rnxeao5ck7fm4e1j2x7zey-4g4qudp8vd-1vumcfo-t28imym6"
        },
        {
          url: "ezopen://open.ys7.com/C69625509/1.hd.live",
          id: "right3",
          accessToken: "at.ao9rmhn824rnxeao5ck7fm4e1j2x7zey-4g4qudp8vd-1vumcfo-t28imym6"
        },
      ]
      let selectedIndex = 0

      function createPlayer(options) {
        return new EZUIKit.EZUIKitPlayer({
            ...options,
            template: "simple", // simple: 极简版; pcLive: 预览; pcRec: 回放; security: 安防版; voice: 语音版;
            //   plugin: ["talk"], // 加载插件，talk-对讲
            language: "en", // zh | en
            // debugDownloadData: true,
            handleError: (error) => {
              console.error("handleError", error);
            },
            download: false,
            env: {
              // https://open.ys7.com/help/1772?h=domain
              // domain默认是 https://open.ys7.com, 如果是私有化部署或海外的环境，请配置对应的domain
              // The default domain is https://open.ys7.com If it is a private deployment or overseas (outside of China) environment, please configure the corresponding domain
              domain: "https://open.ys7.com",
            },
            // 日志打印设置
            loggerOptions: {
              // player.setLoggerOptions(options)
              level: "ERROR", // INFO LOG  WARN  ERROR
              name: "ezuikit",
              showTime: true,
            },
            // 视频流的信息回调类型
            /**
             * 打开流信息回调，监听 streamInfoCB 事件
             * 0 : 每次都回调
             * 1 : 只回调一次
             * 注意：会影响性能
             * 默认值 1
             */
            streamInfoCBType: 1,
            staticPath: "/ezuikit_static", // 如果想使用本地静态资源，请复制根目录下ezuikit_static 到当前目录下， 然后设置该值
            // v8.1.10
            // 自定义清晰度 默认 null, 如果有值 sdk 内部不在进行获取, null 默认使用接口获取的清晰度列表, videoLevelList.length === 0 不展示清晰度控件 sdk 内部不在进行获取, videoLevelList.length > 0 展示控件 sdk 内部不在进行获取
            // videoLevelList: [
            //   { level: 0, name: "流畅", streamTypeIn: 1 },
            //   { level: 1, name: "标清", streamTypeIn: 1 },
            // ],
        })
      }

      for (let i = 0; i < arr.length; i++) {
        if (selectedIndex === i) {
          players.push(null)
          continue
        }
        players.push(createPlayer(arr[i]))
      }

      mainPlayer = createPlayer({
        ...arr[selectedIndex],
        id: "main"
      })

      mainPlayer.eventEmitter.on(EZUIKit.EZUIKitPlayer.EVENTS.firstFrameDisplay, () => {
        setTimeout(() => {
          mainPlayer.capturePicture().then(res => {
            Array.from(document.querySelectorAll(".sub-container"))[selectedIndex].appendChild(cover)
            cover.src = res.data.base64
          })
        }, 10)
      })

      function setSelectedIndex(index) {
        const listEle = Array.from(document.querySelectorAll(".sub-container"))

        if (players[index]) {
          // 记录上一次选中下标， 因为 capturePicture 时异步操作，所以需要记录
          const preIndex = selectedIndex
          // 销毁选中节点 
          players[index].capturePicture().then(res => {
            listEle[preIndex].removeChild(cover)
            listEle[preIndex].classList.remove("selected")
            listEle[index].appendChild(cover)
            cover.src = res.data.base64

            // FIXME: 其实这里平移窗口，然后 resize 窗口应该更合理, 不用每次都销毁重新创建
            players[index].destroy()
            players[index] = null
          })
          // 销毁主屏
          if (mainPlayer) {
            mainPlayer.destroy()
            mainPlayer = null
          }
          mainPlayer = createPlayer({
            ...arr[index],
            id: "main"
          })
        } else {
          return
        }

        players[selectedIndex] = createPlayer({
          ...arr[selectedIndex],
        })
        selectedIndex = index
        listEle[selectedIndex].classList.add("selected")
      }

      Array.from(document.querySelectorAll(".sub-container")).map((ele, i) => {
        ele.addEventListener("click", (e) => {
          setSelectedIndex(i)
        })
      })
    })();
  </script>
</body>
</html>